import Layout from "../../../components/layout"; // import { data } from "../../../lib/testData"; // import { aniData } from "../../../lib/infoData"; import Image from "next/image"; import VideoPlayer from "../../../components/videoPlayer"; import Link from "next/link"; import { closestMatch } from "closest-match"; import Head from "next/head"; import { useEffect, useState } from "react"; import Modal from "../../../components/modal"; export default function Info({ info }) { const title = info.aniData.title.romaji || info.aniData.title.english; const data = info.aniData; const fallback = info.epiFallback; const [open, setOpen] = useState(false); const playingTitle = data.episodes .filter((item) => item.id == info.id) .map((item) => item.title); return ( <> {fallback ? data.title.romaji || data.title.english : playingTitle} setOpen(false)}>

Save this Anime to Your List

Are you sure you want to save this anime to your list?

{data.episodes.length > 0 ? ( data.episodes .filter((items) => items.id == info.id) .map((item) => (
{item.title}

Episode {item.number}

)) ) : ( <> {fallback .filter((item) => item.id == info.id) .map((item) => (
{title}

Episode {item.number}

))} )}
Anime Cover

Studios

{data.studios}
setOpen(true)}> {/* Save to My List */}

Status

{data.status}

Titles

{data.title.romaji || ""}
{data.title.english || ""}
{data.title.native || ""}
{data.genres.map((item, index) => (
{item}
))}

Episodes

{data.episodes.length > 0 ? data.episodes.map((item) => { return (
image Episode {item.number} {item.id == info.id && (
)}

{item.title}

{item.description}

); }) : fallback.map((item) => { return ( Episode {item.number} ); })}
); } export async function getServerSideProps(context) { const { info } = context.query; if (!info) { return { notFound: true, }; } const id = info[0]; const aniId = info[1]; const seek = info[2] || 0; let epiFallback = null; const res = await fetch(`https://api.moopa.my.id/meta/anilist/watch/${id}`); const epiData = await res.json(); const res2 = await fetch( `https://api.moopa.my.id/meta/anilist/info/${aniId}` ); const aniData = await res2.json(); if (aniData.episodes.length === 0) { const res = await fetch( `https://api.moopa.my.id/anime/gogoanime/${ aniData.title.romaji || aniData.title.english }` ); const data = await res.json(); const match = closestMatch( aniData.title.romaji, data.results.map((item) => item.title) ); const anime = data.results.filter((item) => item.title === match); if (anime.length !== 0) { const infos = await fetch( `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` ).then((res) => res.json()); epiFallback = infos.episodes; } } return { props: { info: { id, seek, epiData, aniData, epiFallback, }, }, }; }